<template>
  <a-card title="全部线索" style="width: 300px">
    <el-row>
      <el-col :span="22"> <!-- 头部搜索框 -->
        <el-input v-model="par.value" placeholder="Please input" class="input-with-select">
          <template #prepend>
            <el-select v-model="par.select" placeholder="请输入搜索内容" style="width: 115px;height: 100%;">
              <el-option :label="item.label" :value="item.val" v-for="item in jianli" :key="item.val"/>
            </el-select>
          </template>
          <template #append>
            <el-button icon="search" style="width: 55px; font-size: 16px;"/>
          </template>
        </el-input>
      </el-col>
      <el-col :span="2"><a-button type="primary" size="middle" style="border-radius: 5px"
          @click="CreateWhole()">新增简历</a-button></el-col>
    </el-row>
    <div class="TableCentent">
      <a-table class="Tables" :columns="columns" :data-source="data" :pagination="
        false
      " :scroll="{ x: 1500 }" :row-selection="rowSelection">
        <template #pic="{ record }">
          <img style="width:60px;" :src='record.name' class="imgs" />
        </template>

        <template #operation="{ record }">
          <a @click="Examine(record)" style="margin-right: 10px">查看</a>
          <a @click="Examine(record)" style="margin-right: 10px">跟进</a>
          <a @click="Examine(record)" style="margin-right: 10px">审核</a>
          <a @click="Examine(record)">删除</a>
        </template>
      </a-table>
      <div style="display: flex; margin-top: 20px">
        <a-button type="primary">全选 / 反选</a-button>
        <a-button style="margin-left: 20px" type="primary">刷新简历</a-button>
        <a-button style="margin-left: 20px" type="primary">审核简历</a-button>
        <a-button style="margin-left: 20px" type="primary">简历等级</a-button>
        <a-button style="margin-left: 20px" type="primary">导入简历</a-button>
        <a-pagination style="align-self: center; position: absolute; right: 20px" size="small" :total="total"
          show-size-changer show-quick-jumper :show-total="(total: any) => `总共
          ${total} 项`" :pageSizeOptions="['1', '3', '5', '10']" v-model:pageSize="pageSize"
          v-model:current="current" />
      </div>
    </div>
    <a-drawer width="1000" placement="right" :closable="false" v-model:visible="visible">
      <div class="drawerHeater">
        <div class="drawerHeater-centent">
          <div class="drawerHeater-ThreadName">
            {{ TableOneData.ThreadName }}
          </div>
          <div data-v-d1282a80="" class="drawerHeater-ID">
            （
            <span data-v-d1282a80="">线索ID： {{ TableOneData.id }}； </span>
            <span data-v-d1282a80="" style="color: #0078ff; cursor: pointer">转化为客户</span>
            ）
          </div>
          <div data-v-d1282a80="" class="drawerHeater-p" style="margin-left: 30px">
            转为客户将自动注册企业会员
          </div>
        </div>
        <div class="details">
          <a-row>
            <a-col :span="8"><span style="color: #777; font-size: 14px; font-weight: 400">所属销售：</span><span>{{
                TableOneData.Linkman
            }}</span>
            </a-col>
            <a-col :span="8"><span style="color: #777; font-size: 14px; font-weight: 400">跟进记录：</span><span>{{
                TableOneData.FollowUp
            }}</span>
            </a-col>
            <a-col :span="8"><span style="color: #777; font-size: 14px; font-weight: 400">最后跟进：</span><span>{{
                TableOneData.TurnoverTime
            }}</span>
            </a-col>
          </a-row>
          <a-row style="margin-top: 6px">
            <a-col :span="8"><span style="color: #777; font-size: 14px; font-weight: 400">所在地区：</span><span>{{
                TableOneData.PlaceArea
            }}</span>
            </a-col>
            <a-col :span="8"><span style="color: #777; font-size: 14px; font-weight: 400">创建人：</span><span>{{
                TableOneData.Creator
            }}</span>
            </a-col>
            <a-col :span="8"><span
                style="color: #777; font-size: 14px; font-weight: 400">创建时间：</span><span>2018-6-5</span>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="drawerTab">
        <a-tabs v-model:activeKey="activeKey" tabBarStyle="{background: #fcfcfc;}">
          <a-tab-pane key="1" tab="跟进记录">
            <a-row>
              <a-col :span="12">
                <a-form ref="formRef" :model="formTable" :labelCol="{ span: 4, offset: 0 }"
                  :wrapperCol="{ span: 18, offset: 1 }">
                  <a-form-item label="跟进方式" name="region">
                    <a-select placeholder="请选择" v-model:value="formTable.FollowupWay" disabled>
                      <a-select-option value="shanghai">Zone one</a-select-option>
                      <a-select-option value="beijing">Zone two</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item ref="name" label="联系人" name="name">
                    <a-input disabled v-model:value="formTable.Linkman" :placeholder="
                      TableOneData.ThreadName + '|' + TableOneData.phone
                    " />
                  </a-form-item>
                  <a-form-item ref="name" label="下次跟进时间" name="name">
                    <a-date-picker v-model:value="formTable.NextFollowupTime" show-time type="date" placeholder="选择日期时间"
                      style="width: 100%" disabled />
                  </a-form-item>
                  <a-form-item label="跟进结果" name="desc">
                    <a-textarea disabled :rows="6" v-model:value="formTable.FollowupResult" />
                  </a-form-item>
                  <a-form-item label="添加图片" name="desc">
                    <a-upload-dragger v-model:fileList="formTable.CreateImg" name="file" :multiple="true"
                      action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleChange">
                      <p class="ant-upload-drag-icon">
                        <UploadOutlined twoToneColor="#c0c4cc" />
                      </p>
                      <p style="font-size: 14px">
                        将图片拖到此处，或<span style="color: #409eff">点击上传</span>
                      </p>
                      <p style="font-size: 14px">图片上传仅支持jpg/png格式</p>
                    </a-upload-dragger>
                  </a-form-item>
                  <a-form-item :wrapper-col="{ span: 14, offset: 5 }">
                    <a-button type="primary" @click="onSubmit">保存跟进记录</a-button>
                  </a-form-item>
                </a-form>
              </a-col>
              <a-col style="border-left: 1px solid #ebeef5" :span="12">
                <div style="
                    width: 100%;
                    padding: 10px;
                    padding-top: 0;
                    font-size: 14px;
                    font-weight: 600;
                    border-bottom: 1px solid #ebeef5;
                  ">
                  历史跟进<span style="
                      position: absolute;
                      right: 0;
                      font-weight: 400;
                      color: #666666;
                    ">共有 <span style="color: #6ea7d9"> 0条 </span> 跟进</span>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" tab="线索详情" force-render>
            <a-row>
              <a-col :span="12">
                <a-form ref="formRef" :model="TableOneData" :labelCol="{ span: 4, offset: 0 }"
                  :wrapperCol="{ span: 18, offset: 1 }">
                  <a-form-item ref="ThreadName" label="线索名称" name="ThreadName">
                    <a-input v-model:value="TableOneData.ThreadName" />
                  </a-form-item>
                  <a-form-item ref="Linkman" label="联系人" name="Linkman">
                    <a-input v-model:value="TableOneData.Linkman" />
                  </a-form-item>
                  <a-form-item ref="phone" label="联系手机" name="phone">
                    <a-input v-model:value="TableOneData.phone" />
                  </a-form-item>
                  <a-form-item ref="RelationWeChat" label="联系微信" name="RelationWeChat">
                    <a-input v-model:value="TableOneData.RelationWeChat" />
                  </a-form-item>
                  <a-form-item label="公司规格" name="CompanySpecification">
                    <a-select v-model:value="TableOneData.CompanySpecification">
                      <a-select-option value="20人以下">20人以下</a-select-option>
                      <a-select-option value="20-99人">20-99人</a-select-option>
                      <a-select-option value="100-499人">100-499人</a-select-option>
                      <a-select-option value="500-999人">500-999人</a-select-option>
                      <a-select-option value="1000-9999人">1000-9999人</a-select-option>
                      <a-select-option value="10000人以上">10000人以上</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="所属行业" name="Customer">
                    <a-select v-model:value="TableOneData.Customer">
                      <a-select-option value="计算机软件/硬件">计算机软件/硬件</a-select-option>
                      <a-select-option value="计算机系统/维修">计算机系统/维修</a-select-option>
                      <a-select-option value="通信(设备/运营/服务)">通信(设备/运营/服务)</a-select-option>
                      <a-select-option value="互联网/电子商务">互联网/电子商务</a-select-option>
                      <a-select-option value="网络游戏">网络游戏</a-select-option>
                      <a-select-option value="电子/半导体/集成电路">电子/半导体/集成电路</a-select-option>
                      <a-select-option value="仪器仪表/工业自动化">仪器仪表/工业自动化</a-select-option>
                      <a-select-option value="会计/审计">会计/审计</a-select-option>
                      <a-select-option value="金融(投资/证券)">金融(投资/证券)</a-select-option>
                      <a-select-option value="金融(银行/保险)">金融(银行/保险)</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="所在地区" name="PlaceArea">
                    <al-cascader :placeholder="TableOneData.PlaceArea" v-model:value="TableOneData.PlaceArea" level="3"
                      data-type="all" />
                  </a-form-item>
                  <a-form-item ref="Datailed" label="详细地址" name="Datailed">
                    <a-input v-model:value="TableOneData.Detailed" />
                  </a-form-item>
                  <a-form-item label="备注" name="Remark">
                    <a-textarea :rows="4" v-model:value="TableOneData.Remark" />
                  </a-form-item>
                  <a-form-item :wrapper-col="{ span: 14, offset: 5 }">
                    <a-button style="width: 110px" type="primary" @click="onSubmit">保存</a-button>
                    <a-button style="margin-left: 15px; width: 110px" type="primary" @click="onSubmit">转化为客户</a-button>
                  </a-form-item>
                </a-form>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-drawer>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import { SearchOutlined, UploadOutlined } from "@ant-design/icons-vue";
import AlCascader from "@/components/AlCascader/al-cascader.vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
const SearchType = ref("线索名称");
const SearchContent = ref("");
const total = ref(0);
const pageSize = ref<Number>(3);
const current = ref<Number>(1);
const activeKey = ref("1");
const jianli = ref([
  {label:'简历名称',val:'1'},
  {label:'简历联系方式',val:'2'},
  {label:'会员联系方式',val:'3'},
  {label:'简历ID',val:'4'},
])
const par = ref({
  select:'1',
  value:''
})
const columns = ref([
  { title: "ID", dataIndex: "_id", key: "1", width: 100 },
  { title: "照片", dataIndex: "name", key: "2", width: 100, slots: { customRender: "pic" }, },
  { title: "姓名", dataIndex: "ThreadName", key: "3", width: 150 },
  { title: "微信绑定", dataIndex: "Linkman", key: "4", width: 150 },
  {
    title: "学历",
    dataIndex: "phone",
    key: "5",
    width: 150,
    filters: [
      {
        text: "初中",
        value: "初中",
      },
      {
        text: "高中",
        value: "高中",
      },
      {
        text: "中技",
        value: "中技",
      },
      {
        text: "中专",
        value: "中专",
      },
      {
        text: "大专",
        value: "大专",
      },
      {
        text: "本科",
        value: "本科",
      },
      {
        text: "硕士",
        value: "硕士",
      },
      {
        text: "博士",
        value: "博士",
      },
      {
        text: "博后",
        value: "博后",
      },
    ],
  },
  {
    title: "经验",
    dataIndex: "RelationWeChat",
    key: "6",
    width: 150,
    filters: [
      {
        text: "Joe",
        value: "Joe",
      },
      {
        text: "Jim",
        value: "Jim",
      },
    ],
  },
  { title: "简历完成度", dataIndex: "Customer", key: "7", width: 150 },
  {
    title: "审核状态",
    dataIndex: "PlaceArea",
    key: "8",
    width: 150,
    filters: [
      {
        text: "Joe",
        value: "Joe",
      },
      {
        text: "Jim",
        value: "Jim",
      },
    ],
  },
  { title: "简历联系方式", dataIndex: "Detailed", key: "9", width: 150 },
  { title: "会员联系方式", dataIndex: "TurnoverTime", key: "10", width: 150 },
  {
    title: "等级",
    dataIndex: "FollowUp",
    key: "11",
    width: 150,
    filters: [
      {
        text: "Joe",
        value: "Joe",
      },
      {
        text: "Jim",
        value: "Jim",
      },
    ],
  },
  { title: "投递数", dataIndex: "Creator", key: "12", width: 150 },
  { title: "被下载", dataIndex: "Creator", key: "12", width: 150 },
  { title: "被查看", dataIndex: "Creator", key: "12", width: 150 },
  { title: "被面邀", dataIndex: "Creator", key: "12", width: 150 },
  {
    title: "刷新时间",
    dataIndex: "Creator",
    key: "12",
    width: 150,
    defaultSortOrder: "descend",
    sorter: (a: TableDataType, b: TableDataType) => a.age - b.age,
  },
  {
    title: "登录时间",
    dataIndex: "Creator",
    key: "12",
    width: 150,
    defaultSortOrder: "descend",
    sorter: (a: TableDataType, b: TableDataType) => a.age - b.age,
  },
  {
    title: "注册时间",
    dataIndex: "Creator",
    key: "12",
    width: 150,
    defaultSortOrder: "descend",
    sorter: (a: TableDataType, b: TableDataType) => a.age - b.age,
  },
  {
    title: "联系状态",
    dataIndex: "Creator",
    key: "12",
    width: 150,
    filters: [
      {
        text: "初中",
        value: "初中",
      },
      {
        text: "高中",
        value: "高中",
      },
    ],
  },
  { title: "跟进次数", dataIndex: "Creator", key: "12", width: 150 },
  { title: "跟进状态", dataIndex: "Creator", key: "12", width: 150 },
  { title: "跟进次数", dataIndex: "Creator", key: "12", width: 150 },
  { title: "最后跟进", dataIndex: "Creator", key: "12", width: 150 },
  { title: "简历备注", dataIndex: "Remark", key: "13", width: 150 },
  {
    title: "操作",
    key: "operation",
    fixed: "right",
    width: 180,
    slots: { customRender: "operation" },
  },
]);
interface DataItem {
  key: number;
  _id: number;
  ThreadName: string;
  name: string;
  TheirMarket: string;
  Linkman: string;
  phone: number;
  RelationWeChat: string;
  Customer: string;
  PlaceArea: string;
  Detailed: string;
  TurnoverTime: string;
  FollowUp: string;
  Creator: string;
  CompanySpecification: string;
  Remark: string;
  children?: DataItem[];
}
const data: DataItem[] = [
  {
    key: 1,
    _id: 1,
    name: 'https://i.postimg.cc/Fz2HPWFq/31.jpg',
    ThreadName: "何故",
    TheirMarket: "admin",
    Linkman: "小爱同学",
    phone: 19966666666,
    RelationWeChat: "19977620000",
    Customer: "python开发工程师",
    PlaceArea: "北京",
    Detailed: "北京市朝阳区北辰东路15号",
    TurnoverTime: "2018-6-5",
    FollowUp: "0",
    Creator: "admin",
    CompanySpecification: "20人以下",
    Remark: "",
  },
  {
    key: 2,
    _id: 2,
    name: 'https://i.postimg.cc/Fz2HPWFq/31.jpg',
    ThreadName: "鲤鱼",
    TheirMarket: "admin",
    Linkman: "小爱同学",
    phone: 16566666666,
    RelationWeChat: "19977621000",
    Customer: "django开发工程师",
    PlaceArea: "北京",
    Detailed: "北京市朝阳区北辰东路25号",
    TurnoverTime: "2018-10-25",
    FollowUp: "0",
    Creator: "admin",
    CompanySpecification: "20人以下",
    Remark: "",
  },
  {
    key: 3,
    _id: 3,
    name: 'https://i.postimg.cc/Fz2HPWFq/31.jpg',
    ThreadName: "语不均",
    TheirMarket: "admin",
    Linkman: "小爱同学",
    phone: 16566666666,
    RelationWeChat: "19977622000",
    Customer: "react开发工程师",
    PlaceArea: "上海",
    Detailed: "上海市长宁区虹桥路2550号",
    TurnoverTime: "2018-12-14",
    FollowUp: "0",
    Creator: "admin",
    CompanySpecification: "20人以下",
    Remark: "",
  },
  {
    key: 4,
    _id: 4,
    name: 'https://i.postimg.cc/Fz2HPWFq/31.jpg',
    ThreadName: "不致鱼",
    TheirMarket: "admin",
    Linkman: "小爱同学",
    phone: 16566666666,
    RelationWeChat: "19977623000",
    Customer: "mysql开发工程师",
    PlaceArea: "成都",
    Detailed: "四川省市辖区高新区西区合作路888号",
    TurnoverTime: "2019-1-10",
    FollowUp: "0",
    Creator: "admin",
    CompanySpecification: "20人以下",
    Remark: "",
  },
  {
    key: 5,
    _id: 5,
    name: 'https://i.postimg.cc/Fz2HPWFq/31.jpg',
    ThreadName: "顾凡",
    TheirMarket: "admin",
    Linkman: "小爱同学",
    phone: 16566666666,
    RelationWeChat: "19977624000",
    Customer: "vue开发工程师",
    PlaceArea: "重庆",
    Detailed: "重庆市渝北区金开大道88号附4号",
    TurnoverTime: "2019-1-11",
    FollowUp: "0",
    Creator: "admin",
    CompanySpecification: "20人以下",
    Remark: "",
  },
];
const rowSelection = {
  fixed: "left",
  onChange: (
    selectedRowKeys: (string | number)[],
    selectedRows: DataItem[]
  ) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows,
      123
    );
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows, 456);
  },
  onSelectAll: (
    selected: boolean,
    selectedRows: DataItem[],
    changeRows: DataItem[]
  ) => {
    console.log(selected, selectedRows, changeRows, 798);
  },
};
const router = useRouter();
const visible = ref<boolean>(false);
const TableOneData = ref({
  key: 0,
  id: 0,
  ThreadName: "",
  TheirMarket: "",
  Linkman: "",
  phone: 0,
  RelationWeChat: "",
  Customer: "",
  PlaceArea: "",
  Detailed: "",
  CompanySpecification: "20人以下",
  TurnoverTime: "-6-5",
  FollowUp: "",
  Creator: "",
  Remark: "",
});
const formTable = ref({
  FollowupWay: undefined,
  Linkman: "",
  NextFollowupTime: "",
  FollowupResult: "",
  CreateImg: "",
});

const CreateWhole = () => {
  router.push("/user/compony/wholeAdd");
};

const handleChange = (info: any) => {
  const status = info.file.status;
  if (status !== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (status === "done") {
    message.success(`${info.file.name} file uploaded successfully.`);
  } else if (status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};

const Examine = (item: any) => {
  visible.value = true;
  TableOneData.value = item;
};

const onSubmit = () => {
  console.log(123);
};

const onSearch = () => {
  console.log(123);
};

onMounted(() => {
  total.value = data.length;
});
</script>

<style lang="scss">
// 头部搜索模块
.imgs {
  height: 60px;
  border-radius: 30px;
}

// .HeadrSearch {
//   width: 100%;
//   display: flex;

//   .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
//     height: 45px;
//   }

//   .ant-select-single .ant-select-selector .ant-select-selection-item,
//   .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
//     line-height: 43px;
//   }

//   .ant-input {
//     height: 45px;
//   }

//   .ant-btn-icon-only {
//     width: 55px;
//     height: 45px;
//     background: #f5f7fa;
//     border-color: #dcdfe6;
//   }

//   .ant-btn-icon-only:hover {
//     width: 55px;
//     height: 45px;
//     background: #f5f7fa;
//     border-color: #dcdfe6;
//   }
// }

.TableCentent {
  width: 100%;
  margin-top: 30px;
}

.drawerHeater {
  width: 80%;
  height: 136px;

  .drawerHeater-centent {
    width: 100%;
    height: 43px;
    display: flex;

    .drawerHeater-ThreadName {
      font-size: 20px;
      height: 20px;
      color: #303033;
      font-weight: 600;
      margin-right: 10px;
    }

    .drawerHeater-ID {
      padding-top: 6px;
      font-size: 14px;
      font-weight: 400;
      color: #777;
    }

    .drawerHeater-p {
      padding-top: 6px;
      font-size: 12px;
      line-height: 21px;
      font-weight: 400;
      color: #c5c0c0;
    }
  }

  .details {
    width: 100%;
  }

  .drawerTab {
    width: 100%;
    height: 50px;
    background-color: #c5c0c0 !important;
  }
}
.input-with-select{
  width: 40%;
  height: 45px;
  .el-select,.el-select .select-trigger,.el-select .select-trigger .el-input{
    height: 100%;
  }
}
</style>